<template>
    <view class="login">
        <Navigation />
        <view class="f fd-c ai-c mt-151">
            <view class="logo w-160 h-160 f jc-c ai-c">
                <image src="http://cwht.ricecs.cn/app/login/logo.png" class="w-130 h-130"></image>
            </view>
            <view class="fs-60 mt-40 fw-800 text-color1">手机快捷登录</view>
            <view class="mt-16 fs-24 text-color3">未注册过的手机号将自动创建账号</view>
            <view class="w-654">
                <view class="w-654 h-96 tel f ai-c mt-64 ph-24">
                    <view>+86</view>
                    <u-input v-model="tel" type="number" :border="false" placeholder="请输入手机号" clearable @change="isBtn" />
                </view>
                <view class="mt-32 f ai-c">
                    <u-checkbox-group @change="getAgree">
                        <u-checkbox v-model="isAgree" shape="circle" size="15" activeColor="#FABB3C"></u-checkbox>
                    </u-checkbox-group>
                    <view class="fs-22 text-color3 f"
                        >登录即表示同意<view class="text-color"  @click.stop='toText(6)'>《用户协议》</view>和<view class="text-color"  @click.stop='toText(7)'>《隐私协议》</view></view
                    >
                </view>
            </view>

            <view class="w-654 h-96 mt-64">
                <u-button text="发送验证码" color="#FABB3C" shape="circle" :disabled="disabled" @click="toCode"></u-button>
            </view>

            <!--#ifdef APP-PLUS-->
            <view class="f ai-c mt-130">
                <view class="heng w-120 h-1"></view>
                <view class="fs-26 mh-10 text-color3">使用其他方式</view>
                <view class="heng w-120 h-1"></view>
            </view>
            <view class="f mt-48">
                <image src="http://cwht.ricecs.cn/app/login/wx.png" class="w-52 h-52 mr-48"></image>
                <image src="http://cwht.ricecs.cn/app/login/zfb.png" class="w-52 h-52"></image>
            </view>
            <!--#endif-->
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { sendSmsCode } from '@/services/api/auth';
import { validatePhoneNumber } from '@/utils/global';
const isAgree = ref(false);
const tel = ref('');
const disabled = ref(true);
//发送验证码
const toCode = async () => {
    if (!disabled.value) {
        if (!validatePhoneNumber(tel.value)) {
            uni.showToast({
                title: '请输入正确手机号',
                icon: 'none',
            });
            return;
        }
        await sendSmsCode({ mobile: tel.value, scene: 1 });
        uni.navigateTo({
            url: `/pages_login/code?tel=${tel.value}`,
        });
    }
};
function isBtn() {
    if (tel.value.length === 11 && isAgree.value) {
        disabled.value = false;
    } else {
        disabled.value = true;
    }
}
function getAgree() {
    isAgree.value = !isAgree.value;
    isBtn();
}
function toAccountLogin() {
    uni.navigateTo({
        url: '/pages_login/accountLogin',
    });
}
function toText(type:number) {
	    uni.navigateTo({
	        url: '/pages_mine/text?type='+type,
	    });
	}
</script>
<style lang="scss" scoped>
.login {
    background: #ffffff;
    .tel {
        background: #f8f8f8;
        border-radius: 8px;
    }
    .logo {
        background: #fabb3c;
        border-radius: 50%;
    }
    ::v-deep .u-button__text {
        font-size: 36rpx !important;
        font-weight: 600 !important;
    }
    ::v-deep .u-button {
        height: 96rpx !important;
    }
    .heng {
        background: #999999;
    }
}
</style>
